<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>激想运动专营店上海分店</title>
    <meta name="description" content="overview &amp; stats"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="../../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="../../assets/css/jquery-ui.min.css"/>
    <link rel="stylesheet" href="../../assets/css/bootstrap-datepicker3.min.css"/>
    <link rel="stylesheet" href="../../assets/css/ui.jqgrid.min.css"/>
    <link rel="stylesheet" href="../../assets/css/bootstrap-timepicker.min.css"/>
    <link rel="stylesheet" href="../../assets/css/daterangepicker.min.css"/>
    <link rel="stylesheet" href="../../assets/css/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" href="../../assets/css/bootstrap-colorpicker.min.css"/>
    <!--ztree-->
    <link rel="stylesheet" href="../../assets/tools/ztree/css/metroStyle/metroStyle.css" type="text/css">
    <!-- text fonts -->
    <link rel="stylesheet" href="../../assets/css/fonts.googleapis.com.css"/>
    <!-- ace styles -->
    <link rel="stylesheet" href="../../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
    <link rel="stylesheet" href="../../assets/css/jquery-ui.min.css"/>
    <link rel="stylesheet" href="../../assets/css/login/member.css">
   <link rel="stylesheet" href="../../assets/css/admin.css">
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../../assets/css/ace-part2.min.css" class="ace-main-stylesheet"/>
    <![endif]-->
    <link rel="stylesheet" href="../../assets/css/ace-skins.min.css"/>
    <link rel="stylesheet" href="../../assets/css/ace-rtl.min.css"/>
    <!--[if lte IE 9]>
    <link rel="stylesheet" href="../../assets/css/ace-ie.min.css"/>
    <![endif]-->

    <!-- inline styles related to this page -->
    <!-- ace settings handler -->
    <script src="../../assets/js/ace-extra.min.js"></script>
    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <!--[if lte IE 8]>
    <script src="../../assets/js/html5shiv.min.js"></script>
    <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<style>

</style>
<body class="jx-skin no-skin">
<div id="navbar" class="navbar navbar-default ace-save-state ">
    <div class="navbar-container ace-save-state" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="navbar-header pull-left">
            <div class="workspace-switcher">
                <a href="javascript:;" type="button" class="workspace-switcher-handler dropdown-toggle"
                   data-toggle="dropdown">
                    <i class="fa fa-bars" aria-hidden="true"></i>
                </a>
                <ul class="dropdown-menu workspace-switcher-view" role="menu">
                    <li><a href="#" style=""> <i class="fa fa-check"
                                                 style=""
                                                 aria-hidden="true"></i>
                        <span style="">激想体育专营店上海分店</span></a>
                    </li>
                    <li><a href="#" style=""> <span style="">激想体育专营店上海分店</span>
                        <span class="ml-10 label label-danger label-white middle">11天试用期</span>
                    </a></li>
                    <li><a href="#" style=""> <span style="">激想体育专营店上海分店</span></a>
                    </li>
                    <li class="divider"></li>

                    <li><a href="#" style=""><i class="fa fa-plus" aria-hidden="true"></i> <span
                            style="">新增店铺</span></a>
                    </li>
                </ul>
            </div>
            <a href="../manager/home.html" class="navbar-brand">
                <small>
                    激想运动专营店上海分店
                </small>
            </a>
        </div>
        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="grey dropdown-modal">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="ace-icon fa fa-bell icon-animated-bell"></i>
                        <span class="badge badge-important">8</span>
                    </a>

                    <ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
                        <li class="dropdown-header">
                            <i class="ace-icon fa fa-exclamation-triangle"></i>
                            8 Notifications
                        </li>
                        <li class="dropdown-content">
                            <ul class="dropdown-menu dropdown-navbar navbar-pink">
                                <li>
                                    <a href="#">
                                        <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
														New Comments
													</span>
                                            <span class="pull-right badge badge-info">+12</span>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="btn btn-xs btn-primary fa fa-user"></i>
                                        Bob just signed up as an editor ...
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
														New Orders
													</span>
                                            <span class="pull-right badge badge-success">+8</span>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
													<span class="pull-left">
														<i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
														Followers
													</span>
                                            <span class="pull-right badge badge-info">+11</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown-footer">
                            <a href="#">
                                See all notifications
                                <i class="ace-icon fa fa-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="grey dropdown-modal">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="../../assets/images/avatars/user.jpg" alt="Jason's Photo"/>
                        <span class="user-info">
									<small>Welcome,</small>
									Jason
								</span>
                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>
                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li>
                            <a href="#">
                                <i class="ace-icon fa fa-cog"></i>
                                设置
                            </a>
                        </li>

                        <li>
                            <a href="../account/accountInfo.html" target="_blank">
                                <i class="ace-icon fa fa-user"></i>
                                账户
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="#">
                                <i class="ace-icon fa fa-power-off"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div><!-- /.navbar-container -->
</div>
<div class="main-container ace-save-state" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-container')
        } catch (e) {
        }
    </script>
    <div id="sidebar" class="sidebar responsive  ace-save-state">
        <script type="text/javascript">
            try {
                ace.settings.loadState('sidebar')
            } catch (e) {
            }
        </script>
        <ul class="nav nav-list">
            <li class="">
                <a href="../manager/home.html">
                    <i class="menu-icon  fa fa-home"></i>
                    <span class="menu-text"> 首页 </span>
                </a>
                <b class="arrow"></b>
            </li>
            <li class="active open">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-desktop"></i>
                    <span class="menu-text">终端管理</span>
                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="">
                        <a href="../terminalManager/productBrands.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            品牌管理
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="active">
                        <a href="../terminalManager/productManager.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            商品管理
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="../terminalManager/productCarousels.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            轮播图管理
                        </a>
                        <b class="arrow"></b>
                    </li>
                    F
                </ul>
            </li>
            <li class="">
                <a href="../order/orderList.html">
                    <i class="menu-icon fa fa-file-text-o" aria-hidden="true"></i>
                    <span class="menu-text">订单</span>
                </a>

            </li>
            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-user" aria-hidden="true"></i>
                    <span class="menu-text">员工</span>
                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="">
                        <a href="../staff/staffInfo.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            员工档案
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>
            <li class="">
                <a href="#" class="dropdown-toggle">
                    <i class="menu-icon fa fa-cog" aria-hidden="true"></i>
                    <span class="menu-text">店铺管理</span>
                    <b class="arrow fa fa-angle-down"></b>
                </a>
                <b class="arrow"></b>
                <ul class="submenu">
                    <li class="">
                        <a href="../shop-manager/shopInfo.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            店铺信息
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="../shop-manager/privilegeManagement.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            权限设置
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="../shop-manager/managerLog.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            店铺日志
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="../shop-manager/paymentSetting.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            收款设置
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="../shop-manager/shopBalance.html">
                            <i class="menu-icon fa fa-caret-right"></i>
                            店铺余额
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul>
            </li>
            <li class="">
                <a href="../help/help.html" class="dropdown-toggle">
                    <i class="menu-icon fa fa-question-circle"></i>
                    <span class="menu-text">帮助</span>
                </a>
            </li>
        </ul><!-- /.nav-list -->
        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state"
               data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
    </div>
    <div class="main-content">
        <div class="main-content-inner">
            <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="ace-icon fa fa-home home-icon"></i>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">终端管理</a>
                    </li>
                    <li class="active">商品管理</li>
                </ul><!-- /.breadcrumb -->
                <div class="nav-search" id="nav-search">
                    <form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input"
                                           id="nav-search-input" autocomplete="off"/>
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
                    </form>
                </div><!-- /.nav-search -->
            </div>
            <div class="page-content">
                <div class="page-header">
                    <h1>商品编辑</h1>
                </div><!-- /.page-header -->
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="con-FangDa" id="fangdajing">
                            <div class="con-fangDaIMg">
                                <!-- 正常显示的图片-->
                                <div class="imgContainer">
                                    <img src="../../assets/images/product/big/1.jpg">
                                </div>
                                <!-- 滑块-->
                                <div class="magnifyingBegin"></div>
                                <!-- 放大镜显示的图片 -->
                                <div class="magnifyingShow"><img src="../../assets/images/product/big/1.jpg"></div>
                            </div>
                            <ul class="con-FangDa-ImgList">
                                <!-- 图片显示列表 -->
                                <li class="active"><img src="../../assets/images/product/thumb/1.jpg"
                                                        data-bigimg="../../assets/images/product/big/1.jpg"></li>
                                <li><img src="../../assets/images/product/thumb/2.jpg"
                                         data-bigimg="../../assets/images/product/big/2.jpg"></li>
                                <li><img src="../../assets/images/product/thumb/3.jpg"
                                         data-bigimg="../../assets/images/product/big/3.jpg"></li>
                                <li><img src="../../assets/images/product/thumb/4.jpg"
                                         data-bigimg="../../assets/images/product/big/4.jpg"></li>
                                <li><img src="../../assets/images/product/thumb/5.jpg"
                                         data-bigimg="../../assets/images/product/big/5.jpg"></li>
                            </ul>
                        </div>
                        <div class="product-wrap">
                            <div class="product-title">
                                NIKE AIR ZOOM STRUCTURE 20
                            </div>
                            <table class="table product_info_table">
                                <tbody>
                                <tr>
                                    <td>货号：642849-001</td>

                                    <td>品牌：adidas</td>
                                    <td>上市时间：2015年</td>
                                    <td>季节：春秋季</td>
                                </tr>
                                <tr>
                                    <td>款式：跑步鞋</td>
                                    <td>性别：男</td>

                                </tr>
                                </tbody>
                            </table>
                            <div class="summary-warp">
                                <div class="summary-price">
                                    <div class="dt">触屏销售价:</div>
                                    <div class="dd">
                                        <span class="price">￥1099.00</span>
                                    </div>
                                    <div class="dd">
                                        <span class="discount">6折</span>
                                    </div>
                                    <a id="editPrice" class="edit-price" href="javascript:;">
                                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                        <p>编辑价格</p>
                                    </a>
                                </div>
                                <a class="notice J-notify-sale"></a>
                            </div>
                            <table class="table product_info_table">
                                <tbody>
                                <tr>
                                    <td>标准零售价：
                                        ¥1099.00
                                    </td>

                                    <td>进货价：
                                        ¥688.00
                                    </td>
                                    <td><span class="red">利润：<i class="fa fa-long-arrow-up" style="margin-right: 5px"
                                                                aria-hidden="true"></i> ¥288.00</span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <table class="table product_info_table center">
                                <thead>
                                <tr>
                                    <td class="text-left" colspan="2">尺码／库存</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        5.5(36)
                                    </td>
                                    <td>
                                        3件
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        5.5(36)
                                    </td>
                                    <td>
                                        3件
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        5.5(36)
                                    </td>
                                    <td>
                                        3件
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        5.5(36)
                                    </td>
                                    <td>
                                        3件
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        5.5(36)
                                    </td>
                                    <td>
                                        3件
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <!-- PAGE CONTENT ENDS -->

                        </div><!-- /.row -->
                    </div><!-- /.page-content -->
                </div>
            </div><!-- /.main-content -->

        </div><!-- /.main-container -->
    </div>
    <div class="footer">
        <div class="footer-inner">
            <div class="footer-content">
                沪ICP备15052275号-2
            </div>
        </div>
    </div>
</div>
<div id="priceDialog" title="编辑价格" class="dialog-init">
    <form id="priceForm" action="" class="form-horizontal ui-form">
        <div class="ui-form-item">
            <label class="ui-label "> 标准零售价：</label>
            ¥ <span id="primaryPrice">1000.00</span>

        </div>
        <div class="ui-form-item">
            <label class="ui-label "> 进货价：</label>
            ¥500.00
        </div>
        <div class="ui-form-item">
            <label class="ui-label "> 触屏销售价：</label>
            ¥ <span id="discountPrice"> 600.00</span>
        </div>
        <div class="ui-form-item">
            <label class="ui-label ">折扣率：</label>
            <input id="discount" name="discount" class="input-small" type="text" placeholder="" value="0.6"
                   autocomplete="off">
            <div class="ui-form-explain"><i class="fa fa-times-circle ui-form-icon" aria-hidden="true"></i>
            </div>
        </div>
    </form>
</div>
<!-- basic scripts -->
<!--[if !IE]> -->
<script src="../../assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="../../assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="../../assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<!--[if lte IE 8]>
<script src="../../assets/js/excanvas.min.js"></script>
<![endif]-->
<!-- page specific plugin scripts -->
<script src="../../assets/js/jquery.validate.min.js"></script>
<script src="../../assets/js/jquery-ui.min.js"></script>
<script src="../../assets/js/bootstrap-datepicker.min.js"></script>

<!-- ace scripts -->
<script src="../../assets/js/jquery.easypiechart.min.js"></script>
<script src="../../assets/js/jquery.sparkline.index.min.js"></script>
<script src="../../assets/js/jquery.flot.min.js"></script>
<script src="../../assets/js/jquery.flot.pie.min.js"></script>
<script src="../../assets/js/jquery.flot.resize.min.js"></script>

<!-- ace scripts -->
<script src="../../assets/js/ace-elements.min.js"></script>
<script src="../../assets/js/ace.min.js"></script>
<script src="../../assets/javascripts/app.js"></script>

<!-- inline scripts related to this page -->
<!-- script start -->
<script>
    $(function () {
        $.fn.magnifying = function () {
            var that = $(this),
                $imgCon = that.find('.con-fangDaIMg'),//正常图片容器
                $Img = $imgCon.find('img'),//正常图片，还有放大图片集合
                $Drag = that.find('.magnifyingBegin'),//拖动滑动容器
                $show = that.find('.magnifyingShow'),//放大镜显示区域
                $showIMg = $show.find('img'),//放大镜图片
                $ImgList = that.find('.con-FangDa-ImgList > li >img'),
                multiple = $show.width() / $Drag.width();
            console.log($show.width() );
            console.log($Drag.width() );
            $imgCon.mousemove(function (e) {
                $Drag.css('display', 'block');
                $show.css('display', 'block');
                //获取坐标的两种方法
                // var iX = e.clientX - this.offsetLeft - $Drag.width()/2,
                // 	iY = e.clientY - this.offsetTop - $Drag.height()/2,
                var iX = e.pageX - $(this).offset().left - $Drag.width() / 2,
                    iY = e.pageY - $(this).offset().top - $Drag.height() / 2,
                    MaxX = $imgCon.width() - $Drag.width(),
                    MaxY = $imgCon.height() - $Drag.height();

                /*这一部分可代替下面部分，判断最大最小值
                 var DX = iX < MaxX ? iX > 0 ? iX : 0 : MaxX,
                 DY = iY < MaxY ? iY > 0 ? iY : 0 : MaxY;
                 $Drag.css({left:DX+'px',top:DY+'px'});
                 $showIMg.css({marginLeft:-3*DX+'px',marginTop:-3*DY+'px'});*/

                iX = iX > 0 ? iX : 0;
                iX = iX < MaxX ? iX : MaxX;
                iY = iY > 0 ? iY : 0;
                iY = iY < MaxY ? iY : MaxY;
                $Drag.css({left: iX + 'px', top: iY + 'px'});
                $showIMg.css({marginLeft: -multiple * iX + 'px', marginTop: -multiple * iY + 'px'});
                //return false;
            });
            $imgCon.mouseout(function () {
                $Drag.css('display', 'none');
                $show.css('display', 'none');
            });

            $ImgList.click(function () {
                var NowSrc = $(this).data('bigimg');
                $Img.attr('src', NowSrc);
                $(this).parent().addClass('active').siblings().removeClass('active');
            });
        }
        $("#fangdajing").magnifying();

    });
</script>
<script>
    var editSaleId = '';
    $("#editPrice").click(function () {
        editSaleId = $(this).attr("id");
        $("#priceDialog").dialog('open');
    });
    $("#priceDialog").dialog({
        autoOpen: false,
        modal: true,
        dialogClass: "J-dialog",
        width: 400,
        height: "auto",
        buttons: [
            {
                html: "取消",
                "class": "btn btn-white btn-round  btn-minier",
                click: function () {
                    $(this).dialog("close");
                }
            }
            ,
            {
                html: "确认",
                "class": "btn btn-orange btn-round btn-minier",
                click: function (e) {

                    if (!$('#priceForm').valid()) {
                        e.preventDefault();
                    } else {
                        $("#priceForm").submit();
                        $("#priceDialog").dialog('close');
                    }
                }
            }
        ]

    });
    var sale = $("#priceForm").validate({
        /*onkeyup: function (element, event) {
         //去除左侧空格
         var value = this.elementValue(element).replace(/^\s+/g, "");
         $(element).val(value);
         },*/
        onfocusout: function (element, event) {
            var value = this.elementValue(element).replace(/\s|\xA0/g, "");
            $(element).val(value);
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element.next().find("i"));
        },
        rules: {
            discount: {
                required: true,
                range: [0, 1]
            },

        },
        messages: {
            discount: {
                required: "请输入折扣",
                range: "折扣范围0~1"
            },

        },
        highlight: function (e) {
            $(e).closest('.ui-form-item').addClass('ui-form-item-error');
        },
        success: function (e) {
            $(e).closest('.ui-form-item').removeClass('ui-form-item-error');
        },
        submitHandler: function (form) {
            sale.resetForm();
            form.reset();
        },
        invalidHandler: function (form) {
        }
    });
    $("#discount").keyup(function () {
        var value = $(this).val() == '' ? 0 : $(this).val();
        $("#discountPrice").text($("#primaryPrice").text() * parseFloat(value));
    })

</script>

</body>
</html>
